<template>
    <div class="service">
        <div class="img-wrap">
            <img src="https://cdn.swellpro.com/service/service_1.jpg" alt="">
            <div class="img-content">
                <h1>
                    After-Sales Service<br>
                    <span>We are here to help</span>
                </h1>
            </div>
        </div>

        <div class="container">
            <div class="wrap">
                <a class="item" href="/policy.html">
                    <i class="iconfont icon-repair"></i>
                    <h2>Warranty Policy</h2>
                    <p>Read the Warranty policy before you file the case</p>
                </a>
                <a class="item" href="/repair.html">
                    <i class="iconfont icon-orderform"></i>
                    <h2>Service Request</h2>
                    <p>Fill in the online request form and the team will take care of the case</p>
                </a>
                <a class="item" href="/service-center.html">
                    <i class="iconfont icon-service"></i>
                    <h2>Service Centers</h2>
                    <p>Find a service center</p>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  head() {
    return {
        title: 'Aftersales Service - Swellpro',
        meta: [
            { hid: 'description', name: 'description', content: "Learn about Swellpro's policies for repair, return, and refund. Contact our service centers for customer service before and after sales."},
        ]
    }
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
.service
    background rgb(245, 246, 245)
    .img
        &-wrap
            position relative
            >img
                display block
                width 100%
        &-content
            position absolute
            color #fff
            left 0px
            top 0px
            width 100%
            height 100%
            display flex
            justify-content center
            align-items center
            h1
                font-size 37px
                font-weight 300
                span
                    padding-top 10px
                    font-size 20px
                    display block
                    text-align center
    .container
        background #fff
        padding 60px 15px
        .wrap
            width 900px
            margin 0 auto
            display flex
            justify-content space-between
            .item
                flex 0 0 30%
                border 1px solid rgba(0,0,0,.3)
                cursor pointer
                text-align center
                padding 20px 10px 30px
                box-sizing border-box
                display block
                color #000
                .iconfont
                    font-size 60px
                    color rgba(0,0,0,.55)
                h2
                    padding 10px 0
                p
                    font-weight 300
                    padding-top 30px
</style>